<template>
  <div id="app">
    <transition class="anileft" :name="transitionName">
      <router-view />
    </transition>
  </div>
</template>
<script>
import FastClick from "fastclick";
export default {
  data() {
    return {
      transitionName: "slide-left",
    };
  },
  created() {
    console.log("----test");
    if (this.$store.getters.getIsLogin) {
      // 已登录 刷新之后 获取用户信息
      this.$store.dispatch("getInfo");
      this.$store.dispatch("getCartData");
    }
  },
  watch: {
    $route(to, from) {
      if (to.meta.index > from.meta.index) {
        //外---》内
        this.transitionName = "slide-left";
      } else if (to.meta.index < from.meta.index) {
        //内---》外
        this.transitionName = "slide-right";
      } else {
        this.transitionName = ""; //同级 无过渡效果
      }
    },
  },
  mounted() {
    //解决移动端点击300ms延时
    FastClick.attach(document.body);
  },
};
</script>

<style lang="scss">
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  height: 100%;
  will-change: transform;
  transition: all 500ms;
  position: absolute;
  backface-visibility: hidden;
}

.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
</style>
